<script setup lang="ts">
const props = defineProps({
  placeholder: {
    type: String,
    required: true,
  },
  value: {
    type: String,
    required: false,
  },
});
const emits = defineEmits(["event:change"]);

const onInput = (payload: Event) => {
  emits("event:change", (payload.target as HTMLInputElement).value);
};
</script>

<template>
  <div
    class="flex flex-col rounded-md px-3 py-1 bg-neutral-200 dark:bg-neutral-700"
  >
    <label
      :for="placeholder"
      class="text-xxs text-neutral-500 dark:text-neutral-400"
    >
      {{ placeholder }}
    </label>
    <input
      class="text-xs bg-transparent focus:outline-none dark:text-neutral-300"
      type="text"
      placeholder=" "
      :value="value"
      :name="placeholder"
      @input="onInput"
    />
  </div>
</template>
